<template>
  <div class="main-container" style="height: 100%">
    <div class="item-content" style="height: 100%">
      <div class="form-content" style="margin-bottom: 20px; height: 100%">
        <div style="height: 100%">
          <myTable
            :loading="isLoading"
            tabHeight="600"
            ref="table"
            :data="data"
            :label="label"
            :addShow="true"
            :searchShow="true"
            :paginationConfig="paginationConfig"
            @deleteRow="deleteRow"
            @selectionChange="selectionChange"
            @changePage="changePage"
            @changeSize="changeSize"
            @edit="edit"
          >
            <template #c>
              <el-radio v-model="radio" label="1">符合</el-radio>
              <el-radio v-model="radio" label="2">不符合</el-radio>
            </template>
            <template #d>
              <el-input type="textarea" rows="3"></el-input>
            </template>
          </myTable>
        </div>
      </div>
    </div>
    <myDialog
      :Form="Form"
      :label="label2"
      :visible="visible"
      @disVisible="visible = false"
      @submitSecurity="submitSecurity"
    >
      <template #remark="obj">
        <el-input
          placeholder="请输入备注"
          type="textarea"
          :rows="2"
          v-model="obj.params.row.remark"
        >
        </el-input>
      </template>
    </myDialog>
  </div>
</template>

<script setup>
const radio = ref("1");
const label = ref([
  {
    label: "序号",
    prop: "a",
  },
  {
    label: "检查项目",
    prop: "b",
  },
  {
    label: "符合与否",
    prop: "c",
    columnType: "slot",
    slotName: "c",
  },

  {
    label: "问题描述",
    prop: "d",
    columnType: "slot",
    slotName: "d",
  },
]);
const label2 = ref([
  {
    label: "序号",
    prop: "a",
  },
  {
    label: "检查项目",
    prop: "b",
  },
  {
    label: "符合与否",
    prop: "c",
  },

  {
    label: "问题描述",
    prop: "d",
  },
]);
const data = ref([
  {
    a: "1",
    b: `工贸企业有下列情形之一的，应当判定为重大事故隐患：
（一）未对承包单位、承租单位的安全生产工作统一协调、管理，或者未
定期进行安全检查的；
（二）特种作业人员未按照规定经专门的安全作业培训并取得相应资格，
上岗作业的；
（三）金属冶炼企业主要负责人、安全生产管理人员未按照规定经考核合
格的`,
  },
  {
    a: "2",
    b: `冶金企业有下列情形之一的，应当判定为重大事故隐患：
（一）会议室、活动室、休息室、操作室、交接班室、更衣室（含澡堂）
等 6 类人员聚集场所,以及钢铁水罐冷（热）修工位设置在铁水、钢水、液
渣吊运跨的地坪区域内的；
（二）生产期间冶炼、精炼和铸造生产区域的事故坑、炉下渣坑，以及熔
融金属泄漏和喷溅影响范围内的炉前平台、炉基区域、厂房内吊运和地面
- 21 -
运输通道等 6 类区域存在积水的；
（三）炼钢连铸流程未设置事故钢水罐、中间罐漏钢坑（槽）、中间罐溢
流坑（槽）、漏钢回转溜槽，或者模铸流程未设置事故钢水罐（坑、槽）
的；
（四）转炉、电弧炉、AOD 炉、LF 炉、RH 炉、VOD 炉等炼钢炉的水冷元件
未设置出水温度、进出水流量差等监测报警装置，或者监测报警装置未与
炉体倾动、氧（副）枪自动提升、电极自动断电和升起装置联锁的；
（五）高炉生产期间炉顶工作压力设定值超过设计文件规定的最高工作压
力，或者炉顶工作压力监测装置未与炉顶放散阀联锁，或者炉顶放散阀的
联锁放散压力设定值超过设备设计压力值的；
（六）煤气生产、回收净化、加压混合、储存、使用设施附近的会议室、
活动室、休息室、操作室、交接班室、更衣室等 6 类人员聚集场所，以及
可能发生煤气泄漏、积聚的场所和部位未设置固定式一氧化碳浓度监测报
警装置，或者监测数据未接入 24 小时有人值守场所的；
（七）加热炉、煤气柜、除尘器、加压机、烘烤器等设施，以及进入车间
前的煤气管道未安装隔断装置的；
（八）正压煤气输配管线水封式排水器的最高封堵煤气压力小于 30kPa，
或者同一煤气管道隔断装置的两侧共用一个排水器，或者不同煤气管道排
水器上部的排水管连通，或者不同介质的煤气管道共用一个排水器的`,
  },
  {
    a: "3",
    b: `有色企业有下列情形之一的，应当判定为重大事故隐患：
- 22 -
（一）会议室、活动室、休息室、操作室、交接班室、更衣室（含澡堂）
等 6 类人员聚集场所设置在熔融金属吊运跨的地坪区域内的；
（二）生产期间冶炼、精炼、铸造生产区域的事故坑、炉下渣坑，以及熔
融金属泄漏、喷溅影响范围内的炉前平台、炉基区域、厂房内吊运和地面
运输通道等 6 类区域存在非生产性积水的；
（三）熔融金属铸造环节未设置紧急排放和应急储存设施的（倾动式熔炼
炉、倾动式保温炉、倾动式熔保一体炉、带保温炉的固定式熔炼炉除外）；
（四）采用水冷冷却的冶炼炉窑、铸造机（铝加工深井铸造工艺的结晶器
除外）、加热炉未设置应急水源的；
（五）熔融金属冶炼炉窑的闭路循环水冷元件未设置出水温度、进出水流
量差监测报警装置，或者开路水冷元件未设置进水流量、压力监测报警装
置，或者未监测开路水冷元件出水温度的；
（六）铝加工深井铸造工艺的结晶器冷却水系统未设置进水压力、进水流
量监测报警装置，或者监测报警装置未与快速切断阀、紧急排放阀、流槽
断开装置联锁，或者监测报警装置未与倾动式浇铸炉控制系统联锁的；
（七）铝加工深井铸造工艺的浇铸炉铝液出口流槽、流槽与模盘（分配流
槽）入口连接处未设置液位监测报警装置，或者固定式浇铸炉的铝液出口
未设置机械锁紧装置的；
（八）铝加工深井铸造工艺的固定式浇铸炉的铝液流槽未设置紧急排放阀，
或者流槽与模盘（分配流槽）入口连接处未设置快速切断阀（断开装置），
- 23 -
或者流槽与模盘（分配流槽）入口连接处的液位监测报警装置未与快速切
断阀（断开装置）、紧急排放阀联锁的；
（九）铝加工深井铸造工艺的倾动式浇铸炉流槽与模盘（分配流槽）入口
连接处未设置快速切断阀（断开装置），或者流槽与模盘（分配流槽）入
口连接处的液位监测报警装置未与浇铸炉倾动控制系统、快速切断阀（断
开装置）联锁的；
（十）铝加工深井铸造机钢丝卷扬系统选用非钢芯钢丝绳，或者未落实钢
丝绳定期检查、更换制度的；
（十一）可能发生一氧化碳、砷化氢、氯气、硫化氢等 4 种有毒气体泄漏、
积聚的场所和部位未设置固定式气体浓度监测报警装置，或者监测数据未
接入 24 小时有人值守场所，或者未对可能有砷化氢气体的场所和部位采取
同等效果的检测措施的；
（十二）使用煤气（天然气）并强制送风的燃烧装置的燃气总管未设置压
力监测报警装置，或者监测报警装置未与紧急自动切断装置联锁的；
（十三）正压煤气输配管线水封式排水器的最高封堵煤气压力小于 30kPa，
或者同一煤气管道隔断装置的两侧共用一个排水器，或者不同煤气管道排
水器上部的排水管连通，或者不同介质的煤气管道共用一个排水器的`,
  },
  {
    a: "4",
    b: `建材企业有下列情形之一的，应当判定为重大事故隐患：
（一）煤磨袋式收尘器、煤粉仓未设置温度和固定式一氧化碳浓度监测报
警装置，或者未设置气体灭火装置的；
- 24 -
（二）筒型储库人工清库作业未落实清库方案中防止高处坠落、坍塌等安
全措施的；
（三）水泥企业电石渣原料筒型储库未设置固定式可燃气体浓度监测报警
装置，或者监测报警装置未与事故通风装置联锁的；
（四）进入筒型储库、焙烧窑、预热器旋风筒、分解炉、竖炉、篦冷机、
磨机、破碎机前，未对可能意外启动的设备和涌入的物料、高温气体、有
毒有害气体等采取隔离措施，或者未落实防止高处坠落、坍塌等安全措施
的；
（五）采用预混燃烧方式的燃气窑炉（热发生炉煤气窑炉除外）的燃气总
管未设置管道压力监测报警装置，或者监测报警装置未与紧急自动切断装
置联锁的；
（六）制氢站、氮氢保护气体配气间、燃气配气间等 3 类场所未设置固定
式可燃气体浓度监测报警装置的；
（七）电熔制品电炉的水冷设备失效的；
（八）玻璃窑炉、玻璃锡槽等设备未设置水冷和风冷保护系统的监测报警
装置的`,
  },
  {
    a: "5",
    b: `机械企业有下列情形之一的，应当判定为重大事故隐患：
（一）会议室、活动室、休息室、更衣室、交接班室等 5 类人员聚集场所
设置在熔融金属吊运跨或者浇注跨的地坪区域内的；
（二）铸造用熔炼炉、精炼炉、保温炉未设置紧急排放和应急储存设施的；
- 25 -
（三）生产期间铸造用熔炼炉、精炼炉、保温炉的炉底、炉坑和事故坑，
以及熔融金属泄漏、喷溅影响范围内的炉前平台、炉基区域、造型地坑、
浇注作业坑和熔融金属转运通道等 8 类区域存在积水的；
（四）铸造用熔炼炉、精炼炉、压铸机、氧枪的冷却水系统未设置出水温
度、进出水流量差监测报警装置，或者监测报警装置未与熔融金属加热、
输送控制系统联锁的；
（五）使用煤气（天然气）的燃烧装置的燃气总管未设置管道压力监测报
警装置，或者监测报警装置未与紧急自动切断装置联锁，或者燃烧装置未
设置火焰监测和熄火保护系统的；
（六）使用可燃性有机溶剂清洗设备设施、工装器具、地面时，未采取防
止可燃气体在周边密闭或者半密闭空间内积聚措施的；
（七）使用非水性漆的调漆间、喷漆室未设置固定式可燃气体浓度监测报
警装置或者通风设施的`,
  },
  {
    a: "6",
    b: `轻工企业有下列情形之一的，应当判定为重大事故隐患：
（一）食品制造企业烘制、油炸设备未设置防过热自动切断装置的；
（二）白酒勾兑、灌装场所和酒库未设置固定式乙醇蒸气浓度监测报警装
置，或者监测报警装置未与通风设施联锁的；
（三）纸浆制造、造纸企业使用蒸气、明火直接加热钢瓶汽化液氯的；
（四）日用玻璃、陶瓷制造企业采用预混燃烧方式的燃气窑炉（热发生炉
煤气窑炉除外）的燃气总管未设置管道压力监测报警装置，或者监测报警
- 26 -
装置未与紧急自动切断装置联锁的；
（五）日用玻璃制造企业玻璃窑炉的冷却保护系统未设置监测报警装置的；
（六）使用非水性漆的调漆间、喷漆室未设置固定式可燃气体浓度监测报
警装置或者通风设施的；
（七）锂离子电池储存仓库未对故障电池采取有效物理隔离措施的`,
  },

  {
    a: "7",
    b: `纺织企业有下列情形之一的，应当判定为重大事故隐患：
（一）纱、线、织物加工的烧毛、开幅、烘干等热定型工艺的汽化室、燃
气贮罐、储油罐、热媒炉，未与生产加工等人员聚集场所隔开或者单独设
置的；
（二）保险粉、双氧水、次氯酸钠、亚氯酸钠、雕白粉（吊白块）与禁忌
物料混合储存，或者保险粉储存场所未采取防水防潮措施的`,
  },
  {
    a: "8",
    b: `烟草企业有下列情形之一的，应当判定为重大事故隐患：
（一）熏蒸作业场所未配备磷化氢气体浓度监测报警仪器，或者未配备防
毒面具，或者熏蒸杀虫作业前未确认无关人员全部撤离熏蒸作业场所的；
（二）使用液态二氧化碳制造膨胀烟丝的生产线和场所未设置固定式二氧
化碳浓度监测报警装置，或者监测报警装置未与事故通风设施联锁的`,
  },
  {
    a: "9",
    b: `存在粉尘爆炸危险的工贸企业有下列情形之一的，应当判定为重大事故隐
患：
（一）粉尘爆炸危险场所设置在非框架结构的多层建(构)筑物内，或者粉
尘爆炸危险场所内设有员工宿舍、会议室、办公室、休息室等人员聚集场
- 27 -
所的；
（二）不同类别的可燃性粉尘、可燃性粉尘与可燃气体等易加剧爆炸危险
的介质共用一套除尘系统，或者不同建（构）筑物、不同防火分区共用一
套除尘系统、除尘系统互联互通的；
（三）干式除尘系统未采取泄爆、惰化、抑爆等任一种爆炸防控措施的；
（四）铝镁等金属粉尘除尘系统采用正压除尘方式，或者其他可燃性粉尘
除尘系统采用正压吹送粉尘时，未采取火花探测消除等防范点燃源措施的；
（五）除尘系统采用重力沉降室除尘，或者采用干式巷道式构筑物作为除
尘风道的；
（六）铝镁等金属粉尘、木质粉尘的干式除尘系统未设置锁气卸灰装置的；
（七）除尘器、收尘仓等划分为 20 区的粉尘爆炸危险场所电气设备不符合
防爆要求的；
（八）粉碎、研磨、造粒等易产生机械点燃源的工艺设备前，未设置铁、
石等杂物去除装置，或者木制品加工企业与砂光机连接的风管未设置火花
探测消除装置的；
（九）遇湿自燃金属粉尘收集、堆放、储存场所未采取通风等防止氢气积
聚措施，或者干式收集、堆放、储存场所未采取防水、防潮措施的；
（十）未落实粉尘清理制度，造成作业现场积尘严重的`,
  },
  {
    a: "10",
    b: `使用液氨制冷的工贸企业有下列情形之一的，应当判定为重大事故隐患：
（一）包装、分割、产品整理场所的空调系统采用氨直接蒸发制冷的；
- 28 -
（二）快速冻结装置未设置在单独的作业间内，或者快速冻结装置作业间
内作业人员数量超过 9 人的`,
  },
  {
    a: "11",
    b: `存在硫化氢、一氧化碳等中毒风险的有限空间作业的工贸企业有下列情形
之一的，应当判定为重大事故隐患：
（一）未对有限空间进行辨识、建立安全管理台账，并且未设置明显的安
全警示标志的；
（二）未落实有限空间作业审批，或者未执行“先通风、再检测、后作业”
要求，或者作业现场未设置监护人员的`,
  },
  {
    a: "12",
    b: `本标准所列情形中直接关系生产安全的监控、报警、防护等设施、设备、
装置，应当保证正常运行、使用，失效或者无效均判定为重大事故隐患`,
  },
]);
const edit = (val) => {
  Form.value = {
    id: val.id,
    serialNumber: val.serialNumber,
    type: val.type,
    checklistContents: val.checklistContents,
    circumstance: val.circumstance,
    remark: val.remark,
    edit: true,
  };

  visible.value = true;
};
const visible = ref(false);
const submitSecurity = async (val) => {
  console.log(val);
  if (val.value.edit == true) {
    visible.value = false;
    let result = await putCorporateProductionResponsibility(val.value);
    if (result.code == 0) {
      Notification({
        title: "成功",
        message: "修改成功",
        type: "success",
      });
    } else {
      Notification({
        title: "失败",
        message: result.message,
        type: "error",
      });
    }
    changeTable();
  } else {
    visible.value = false;
    let result = await addCorporateProductionResponsibility(val.value);
    if (result.code == 0) {
      Notification({
        title: "成功",
        message: "新增成功",
        type: "success",
      });
    } else {
      Notification({
        title: "失败",
        message: result.msg,
        type: "error",
      });
    }
    changeTable();
  }
  Form.value = {
    id: null,
    serialNumber: null,
    type: null,
    checklistContents: null,
    circumstance: null,
    remark: null,
  };
};
const Form = ref({
  id: null,
  serialNumber: null,
  type: null,
  checklistContents: null,
  circumstance: null,
  remark: null,
});

const paginationConfig = ref({
  page: 1,
  size: 10,
  total: 0,
});
const changePage = (val) => {
  paginationConfig.value.page = val;
  changeTable();
};
const changeSize = (val) => {
  paginationConfig.value.size = val;
  changeTable();
};
import {
  getCorporateProductionResponsibility,
  deleteCorporateProductionResponsibility,
  addCorporateProductionResponsibility,
  putCorporateProductionResponsibility,
} from "@/api/safetymanagement";
import { ref, defineComponent, onMounted } from "vue";
import myTable from "@/components/my-table.vue";
import myDialog from "@/components/my-dialog.vue";
const NewComponentName = defineComponent({
  name: "NewComponentName",
});
console.log(NewComponentName);

import { Notification } from "element-ui";

const isLoading = ref(true);
const deleteRow = (id) => {
  selectList.value = [id];
  deleteList();
};
const changeTable = async (name) => {
  isLoading.value = true;
  let result = await getCorporateProductionResponsibility(
    paginationConfig.value.page,
    paginationConfig.value.size,
    name
  );
  console.log(result.message);
  console.log(result.data);
  paginationConfig.value.total = Number(result.message);
  isLoading.value = false;
  // data.value = result.data;
};
onMounted(() => {
  changeTable();
});
//上传文件
// const addFile = async (list) => {
//   let result = await addCorporateProductionResponsibility({
//     fileName: list[0].name,
//     fileUrl: list[0].url,
//   });
//   if (result.code == 0) {
//     Notification({
//       title: "成功",
//       message: "上传成功",
//       type: "success",
//     });
//     changeTable();
//   } else {
//     Notification({
//       title: "失败",
//       message: "上传失败",
//       type: "error",
//     });
//   }
// };
//批量选择的数据
const selectList = ref();
const selectionChange = (value) => {
  selectList.value = value;
};
//删除所选中的
const deleteList = async () => {
  if (selectList.value.length == 0) {
    Notification({
      title: "警告",
      message: "请选择要删除的项",
      type: "warning",
    });
    return;
  }
  let result = await deleteCorporateProductionResponsibility(selectList.value);
  if (result.code == 0) {
    Notification({
      title: "成功",
      message: "删除成功",
      type: "success",
    });
    paginationConfig.value.page = 1;
    changeTable();
  } else {
    Notification({
      title: "失败",
      message: "删除失败",
      type: "error",
    });
  }
};
//选中的id
selectionChange([]);
const table = ref(null);
</script>
<style lang="scss" scoped>
// :deep(.cell) {
//   display: flex;
//   justify-content: space-around;
// }
/*去除upload组件过渡效果*/
::v-deep .el-upload-list__item {
  transition: none !important;
}
::v-deep .el-upload-list__item-thumbnail {
  /* 图片在方框内显示长边 */
  object-fit: scale-down !important;
}
:deep(.el-input__inner) {
  height: auto !important;
}
:deep(.el-icon-arrow-right:before) {
  font-size: 12px !important;
}
:deep(.el-table th) {
  background: #fafafa;
}
:deep(.el-collapse-item__header) {
  font-weight: bold;
  color: #333;
  font-size: 15px;
  padding: 0 10px;
}
:deep(.el-icon-arrow-right:before) {
  font-weight: bold;
  color: #333;
  font-size: 25px;
}
body {
  min-height: 100vh;

  transition: all 0.3s ease;
}
.container {
  height: 100%;
  padding: 15px;
  overflow: auto;
  box-sizing: border-box;

  .main-content {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    min-width: 700px;

    .header-container {
      padding: 15px 15px;
      border-bottom: solid 1px #e6e6e6;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .title {
        position: relative;
        font-weight: bold;
        color: #333;
        font-size: 15px;
        padding-left: 16px;

        &::before {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }

        &::after {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }
      }
    }
  }
}

.main {
  padding: 12px 15px;

  .item-content {
    height: 100%;
    overflow: hidden;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;

    .item-header {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;

      .subheading {
        position: relative;
        color: #555;
        font-size: 14px;
        padding-left: 14px;

        &::after {
          content: "";
          width: 2px;
          height: 14px;
          background-color: #82a848;
          left: 0;
          top: calc(50% - 7px);
          position: absolute;
        }

        &::before {
          content: "";
          width: 2px;
          height: 14px;
          background-color: #82a848;
          left: 4px;
          top: calc(50% - 7px);
          position: absolute;
        }
      }
    }

    .content-container {
      margin-top: -1px;
    }
  }
}

.w-100 {
  width: 100%;
}

.item-form-content {
  display: flex;
  flex-direction: row;
  align-items: center;

  i {
    margin: 0 10px;
  }
}

.productList-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  height: 40px;
}

.form-content {
  padding: 0 10px;
}
.dialog-action-bar {
  text-align: center;
  margin-top: 30px;
}
</style>
